<template>
    <div>
      <Table border :columns="columns" :data="tableData"><template slot-scope="{ row, index }" slot="image">
           <img :src="row.image" style="width:80px;height:80px;"/>
           <span>{{row.brand+row.type+row.color}}</span>
       </template>
      <template slot-scope="{ row, index }" slot="delete">
            <Button type="error" size="small" @click="remove(index)">Delete</Button>
        </template>
        </Table>

        <Modal v-model="modal1"
        title="提示"
        @on-ok="ok">
        <div>确认删除吗?</div>
    </Modal>
    </div>
</template>


<script>
import { mapState, mapActions } from 'vuex'
export default {
    name:'Cart',
    data(){
        return{
            modal1:false,
            currentIndex: 0,
           columns: [
                    {
                        title: '商品信息',
                        slot: 'image',
                        width: 400
                    },
                    {
                        title: '单价',
                        key: 'price'
                    },
                    {
                        title: '数量',
                        key: 'age',
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        slot: 'delete'
                    }
                ],
                data6: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ]
    }
},
computed:{
    ...mapState({
        tableData:(state)=>{
            return state.cart.products
        }
    })
},
methods:{
    ...mapActions(['deleteProduct']),
    remove(index){
        this.modal1 = true;
        this.currentIndex = index
    },
    ok(){
        this.deleteProduct(this.currentIndex)
    }
}
}
</script>

<style lang="scss" scoped>

</style>